<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sprites</title>
</head>
<body>

<style>
    @import url(./style/icon.css?__inline);
    @import url('./style/background-no-repeat.css?__inline');
</style>

<style>
    @import url('./style/background-x.css?__inline');
    @import url('./style/background-y.css?__inline');
</style>

<style>

    .box_y {
        width: 400px;
        height: 200px;
        background-image: url(./style/img/background-y.jpg?__sprite);
        background-repeat: repeat-y;
    }

    .box_y_small {
        height: 200px;
        background: url('./style/img/background-small.jpg?__sprite') repeat-y;
    }

</style>


<div class="group-no-repeat">
    <h4>background-repeat: no-repeat; 测试</h4>
    <div class="firefox">&nbsp;</div>
    <div class="chrome">&nbsp;</div>
    <div class="facebook">&nbsp;</div>
</div>

<div class="group-repeat-x">
    <h4>background-repeat: repeat-x; 测试</h4>
    <div class="box_x"></div>
    <div class="box_x_small"></div>
</div>

<div class="group-repeat-y">
    <h4>background-repeat: repeat-y; 测试</h4>
    <div class="box_y"></div>
    <div class="box_y_small"></div>
</div>

<div class="group-left">
    <h4>background-postion: left &lt;xxx&gt;px;测试</h4>
    <div class="i-exp"></div>
    <div class="i-guan"></div>
    <div class="i-zhuan"></div>
    <div class="i-government"></div>
    <div class="i-company"></div>
    <div class="i-government-avatar"></div>
    <div class="i-company-avatar"></div>
    <div class="i-guan-avatar"></div>
    <div class="i-zhuan-avatar"></div>
    <h4>background-postion: left &lt;xxx&gt;px;测试，小图内background-position</h4>
    <div class="open-level open-level-1"></div>
    <div class="open-level open-level-2"></div>
    <div class="open-level open-level-3"></div>
    <div class="open-level open-level-4"></div>
    <div class="open-level open-level-5"></div>
    <div class="open-level open-level-6"></div>
    <div class="open-level open-level-7"></div>
    <div class="open-level open-level-8"></div>
    <div class="open-level open-level-9"></div>
    <div class="open-level open-level-10"></div>
    <div class="open-level open-level-11"></div>
    <div class="open-level open-level-12"></div>
    <div class="open-level open-level-13"></div>
    <div class="open-level open-level-14"></div>
    <div class="open-level open-level-15"></div>
    <div class="open-level open-level-16"></div>
    <div class="open-level open-level-17"></div>
    <div class="open-level open-level-18"></div>
    <div class="open-level open-level-19"></div>
    <div class="open-level open-level-20"></div>
</div>
<div class="group-right">
    <h4>background-position: right &lt;xxx&gt;px|top; 测试</h4>
    <div class="facebook-right"></div>
</div>
</body>
</html>
